<script setup lang="ts">
import { getPatientOrderAddressAPI } from '@/apis/address'
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 地址列表
const addressList = ref<AddressItem[]>([])

// 获取地址列表
const loadAddressList = async () => {
  const res = await getPatientOrderAddressAPI()
  addressList.value = res.data
}

// 页面显示时加载数据
onShow(() => {
  loadAddressList()
})

// 选择地址
const onSelectAddress = (address: AddressItem) => {
  // 返回上一页并传递选中的地址
  uni.navigateBack()
  uni.$emit('onAddressSelect', address)
}

// 编辑地址
const onEditAddress = (address: AddressItem) => {
  uni.navigateTo({
    url: `/subpkg_medicine/pages/address/form?id=${address.id}`,
  })
}
</script>

<template>
  <view class="address-page">
    <scroll-view scroll-y class="address-list">
      <view
        class="address-item"
        v-for="item in addressList"
        :key="item.id"
        @tap="onSelectAddress(item)"
      >
        <view class="info">
          <view class="receiver">
            {{ item.receiver }}
            <text class="phone">{{
              item.mobile?.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
            }}</text>
            <text v-if="item.isDefault === 1" class="default-tag">默认</text>
          </view>
          <view class="address">
            {{ item.province }}{{ item.city }}{{ item.county }}{{ item.addressDetail }}
          </view>
        </view>
        <view class="edit" @tap.stop="onEditAddress(item)">
          <uni-icons type="compose" size="20" color="#848484"></uni-icons>
        </view>
      </view>
    </scroll-view>

    <view class="footer">
      <navigator url="/subpkg_medicine/pages/address/form" hover-class="none" class="add-btn">
        <uni-icons type="plusempty" size="20" color="#fff"></uni-icons>
        <text>添加地址</text>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
.address-page {
  min-height: 100vh;
  background-color: #f6f6f6;
  padding: 20rpx;
  padding-bottom: 120rpx;

  .address-list {
    .address-item {
      display: flex;
      align-items: center;
      padding: 40rpx 30rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;

      .info {
        flex: 1;

        .receiver {
          font-size: 32rpx;
          margin-bottom: 20rpx;

          .phone {
            color: #848484;
            margin-left: 20rpx;
          }

          .default-tag {
            background-color: #eaf8f6;
            color: #16c2a3;
            font-size: 24rpx;
            padding: 4rpx 10rpx;
            border-radius: 4rpx;
            margin-left: 20rpx;
          }
        }

        .address {
          color: #848484;
          font-size: 28rpx;
        }
      }

      .edit {
        padding: 20rpx;
        margin: -20rpx;
      }
    }
  }

  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background-color: #fff;

    .add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      background-color: #16c2a3;
      border-radius: 40rpx;
      color: #fff;
      font-size: 30rpx;

      text {
        margin-left: 10rpx;
      }
    }
  }
}
</style>